<div class="layui-fluid">
    <link rel="stylesheet" th:href="@{/bpmn-js/assets/diagram-js.css}">
    <link rel="stylesheet" th:href="@{/bpmn-js/assets/bpmn-js.css}">
    <link rel="stylesheet" th:href="@{/bpmn-js/assets/bpmn-font/css/bpmn.css}">
    <link rel="stylesheet" th:href="@{/bpmn-js/assets/bpmn-font/css/bpmn-codes.css}">
    <link rel="stylesheet" th:href="@{/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css}">
    <link rel="stylesheet" th:href="@{/bpmn-js/bpmn-js-properties-panel/properties-panel.css}">
    <link rel="stylesheet" th:href="@{/bpmn-js/diagram-js-minimap/diagram-js-minimap.css}">
    <style>
        .layui-table-tool,.layui-table-column.layui-table-page,.layui-table-main{
            background-color: white;
        }
        .bpmn-js-wrapper {
            height: 100%;
            position: relative;
        }
        .bpmn-js-wrapper .canvas{
            width: 100%;
            height: 100%;
        }
        .bpmn-js-wrapper #properties-panel {
            position: absolute;
            top: 5px;
            right: 5px;
        }

        /* 操作 */
        .bpmn-js-wrapper .operate {
            position: absolute;
            right: 50px;
            bottom: 100px;
        }
        .bpmn-js-wrapper .operate .operate-item{
            padding: 15px;
            width: 110px;
            margin: 10px;
            background: rgb(255, 255, 255);
            color: black;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            border-radius: 6px;
        }
        .bpmn-js-wrapper .operate .operate-item:hover{
            color: deepskyblue;
        }
        .bpmn-js-wrapper .djs-minimap{
            top: auto;
            bottom: 10px;
        }
        #properties-panel{
            width: 350px;
        }

    </style>
    <div class="bpmn-js-wrapper">
        <!-- 画布 -->
        <div class="canvas" id="canvas"></div>
        <!-- 属性工具栏 -->
        <div id="properties-panel"></div>
        <!-- 操作 -->
        <div class="operate"></div>
    </div>
    <div class="layui-layer-btn layui-layer-btn-c" id="custom-button" style="position: absolute;bottom: 10px;"></div>


</div>
<script type="text/javascript" th:src="@{/bpmn-js/bpmn-modeler.production.min.js}" ></script>
<script type="text/javascript">
    {{#
        var scripts = [
        '/bpmn-js/bpmn-modeler.production.min.js',
        '/bpmn-js/bpmn-js-properties-panel/bpmn-js-properties-panel.umd.js',
        '/bpmn-js/diagram-js-minimap/diagram-minimap.umd.js',
        '/bpmn-js/defaultXmlStr.js',
        '/bpmn-js/translate.js',
        '/js/page/from-component/process-definition.js'];
        top.tools.loadscripts(scripts,function (){
            templateViewInit();
        });
    }}
</script>